<template>
  <div class="my-pagination">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      :layout="layout"
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      default: 50,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    layout: {
      type: String,
      default: 'prev, pager, next, jumper, ->, total',
    },
    background: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleSizeChange(newSize) {
      this.$emit('pagination-size-change', newSize);
    },
    handleCurrentChange(newPage) {
      this.$emit('pagination-current-change', newPage);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-pagination {
  ::v-deep .el-pagination.is-background {
    .el-pager li,
    .btn-prev,
    .btn-next {
      height: 32px;
      line-height: 32px;
      width: 32px;
      padding: 0;
      border-radius: 4px;
      background-color: #fff;
      border: 1px solid #e2e2e2;
      margin: 0 8px;
      color: $text-color;
    }
    button:disabled {
      background-color: #F0F0F0;
      color: #c6c6c6;
    }
    .el-pager li:not(.disabled).active {
      border: 1px solid $primary-color;
      color: $primary-color;
      background-color: #fff;
    }
  }
}
</style>